var vm = new Vue({
	el:'#app',
	data:{
		productList:[],
		totalMoney:0,
		allFlag:false,
		totalMoney:0,
		showFlag:false,
		delItem:[]
		
	},
	filters:{ //局部过滤器
		formatMoney:function(value,type){
			return type + value.toFixed(2);
		}
	},
	mounted:function(){
		
		this.$nextTick(function () {  //这个函数，里面，外面的this,都是指vm
		// 代码保证 this.$el 在 document 中
			this.cartView();
		})
	},
	methods:{
		cartView:function(){  //vue中使用vue-resource进行数据交互，并不像ajax,必须得放到服务器中
			var _this = this;
			this.$http.get('data/cart.json').then(function(res){
				_this.productList = res.body.result.productList;
			})
		},
		changeMoney:function(value,type){ //直接将item.productQuentity当参数传进来，不执行
			if(type>0){
				//增加
				value.productQuentity ++;
			}else{
				//减少
				value.productQuentity--;
				if(value.productQuentity<=1){
					value.productQuentity = 1;
				}
			}
			console.log('前')
			this.calcTotalMoney(); //就这句话没执行，不知道什么原因
			console.log('后')
		},
		checkOne:function(value){
			if(typeof value.checked == 'undefined'){
				this.$set(value,'checked',true);
			}else{
				value.checked = !value.checked;
			}
			this.calcTotalMoney();
		},
		checkAll:function(flag){
			this.allFlag = flag;
			var _this = this;
			//全选，要循环productList，得到productList.checked，让所有的值都是true,这样才能实现全选的效果
			this.productList.forEach(function(val,index){
				if(typeof val.checked == 'undefined'){
					_this.$set(val,'checked',flag);
				}else{
					val.checked = flag;
				}
			})
			//只要有一个单选没选中，就取消全选了，怎样判断有没选中的呢，
			//是不是要添加一个监听啊，监听val.checked
			this.calcTotalMoney();
		},
		calcTotalMoney:function(){
			//计算总金额，得先循环，再算数量*单价
			this.totalMoney = 0;
			var _this = this;
			this.productList.forEach(function(val,index){
				if(val.checked){
					_this.totalMoney += val.productQuentity*val.productPrice;
				}	
			})
		},
		passItem:function(value){
			this.showFlag = true;
			this.delItem = value;
		},
		delProduct:function(){
			//indexOf()方法，也可以用于数组中，获得数组中的值相对于数组的索引,用法也一样；
			var nowIndex = this.productList.indexOf(this.delItem);
			this.productList.splice(nowIndex,1);  //splice方法，2个参数，表示删除；3个参数，表示在某位置删除几个，增加几个，返回值是原数组
			this.showFlag = false;
		}
	}
	
});
/*
 	在写input中的增加，减少数量的时候，犯了如下错误：
 	①，data：{
 		num：1
 	} 
 	在data中定义了一个num值，本来打算是通过这个num来实现数量的增减，及单件商品总价的计算
 	发现错误：自定义了一个num,然后在 <input type="text" v-model="num" />
 		li是循环出来的，所以，这个input也循环了多次，且v-model的值都是num, 所以，改变一个num值，其他的input的值就都改变了，这种方法不行
 	②，然后看视频，知道，v-model 的值 是后台传来的数据，必须是后台传过来的，item.productQuentity,因为每个li中的item.productQuentity不一样
 		所以，几个v-model互不影响
	③，增减事件
		增加，减少肯定是通过改变item.productQuentity的值来实现的，但是，不知道js中怎么获得页面上的item.productQuentity值
		看了视频，通过传参的形式，将这个值传进来
	④，增加，减少，也可以通过一个事件来实现，通过传入的参数，判断是增加，还是减少
	
	单选，全选
	单选中，跟input一样，循环出来的，选中，取消的状态不能通过data里的数据来判断，否则，会全都执行
	只能用后台传来的item里的数据来区分，这点我是想到了，但是，我看item中的数据就剩productId没有用了，所以，我就用了这个值
	这是不对的，正确的做法是通过vm.$set()方法             往item里添加一个字段来实现这种效果
	
	
	*************
	* 非常重要的一点，vue中对于数组，也是可以循环的；
	* 
	* 加减事件可以用一个函数，通过传不同的参数，来控制
	* 全选，取消全选，也可以用一个参数，通过传参，来控制  true:表示全选   false:取消全选
	
	
 * */